<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>检测用户输入字数</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        #box{
            width: 560px;
            margin: 0 auto;
            box-shadow: 0 0 5px #aaa;
            text-align: center;
            font-family: 'Microsoft YaHei';
        }
        #box .hint{
            height: 30px;
            color: #666;
            font-size: 12px;
            position: relative;
        }
        #box .hint h4{
            margin: 0;
            padding: 0;
            color: cornflowerblue;
            font-size: 14px;
            position: absolute;
            top: 0;
        }
        #box div{
            box-sizing: border-box;
            width: 100%;
            line-height: 30px;
            padding: 0 10px;
            text-align: right;
        }
        #content{
            width: 540px;
            height: 120px;
            font-size: 14px;
            color: #333;
            font-family: 'Microsoft YaHei';
            line-height: 20px;
            outline: none;
            border: 1px solid #f96;
            resize: none;
        }
        #box .issue{
            height: 40px;
        }
        #box .issue input[type=submit]{
            width: 80px;
            height: 30px;
            border: none;
            border-radius: 5px;
            background-color: #f96;
            color: #fff;
            font-family: 'Microsoft YaHei';
            outline: none;
        }
        #box .issue input[type=submit]:hover{
            background-color: darkorange;
            cursor: pointer;
        }
        .show{
            height: 40px;
            margin-top: 100px;
            text-align: center;
        }
        .show a{
            color: #666;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="hint"><h4>有什么新鲜事想告诉大家?</h4>已输入<strong>0</strong>个字</div>
        <textarea name="" id="content"></textarea>
        <div class="issue"><input type="submit" value="发布"></div>
    </div>
    <div class="show">
        <a href="01-检测用户输入字数.html">示范模板</a>
    </div>
</body>
</html>

<script>
    // 鼠标按下事件
    $('#content').keyup(function(){
        // 获取文本框内容及其内容的长度
        var len = $('#content').val().length;
        // 添加
        $('#box .hint strong').text(len);
        // 判断
        len > 160? $('#box .hint').find('strong').css("color","orange"): $('#box .hint').find('strong').css("color","#000")
    })

</script>